<title>表单组件</title>

<div class="content-header row">
    <div class="content-header-left col-md-8 col-12 mb-2 breadcrumb-new">
        <h3 class="content-header-title mb-0 d-inline-block">表单组件</h3>
        <div class="row breadcrumbs-top d-inline-block">
            <div class="breadcrumb-wrapper mr-1">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/dashboard" class="menu-router">首页</a></li>
                    <li class="breadcrumb-item"><a href="javascript:;">组件</a></li>
                    <li class="breadcrumb-item active">表单组件</li>
                </ol>
            </div>
        </div>
    </div>
</div>

<div class="content-body">
    <section class="basic-inputs">
        <div class="row match-height">
            <div class="col-xl-12 col-lg-12 col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Input Textarea 输入计数器</h4>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-xl-12 col-lg-12 col-md-12">
                                <p>form组件自动初始化的输入文本长度计数器，需要必备两个元素</p>
                                <p class="text-muted">1：input 支持的type有<code>'text','password','email','number','search','tel','url'</code></p>
                                <p class="text-muted">2：input/textarea 必须有属性maxlength</p>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-md-6 col-lg-6 col-md-6">
                                <form class="form">
                                    <div classs="form-body">
                                        <p class="text-primary text-bold-600">页面元素加载完成后初始化</p>
                                        <fieldset class="form-group">
                                            <input type="text" class="form-control" maxlength="20" max-showOnReady="true" />
                                        </fieldset>
                                    </div>
                                </form>
                                <pre>
                                    <code class="language-html">
                                        &lt;fieldset class="form-group"&gt;
                                            &lt;input type="text" class="form-control" maxlength="20" max-showOnReady="true" /&gt;
                                        &lt;/fieldset&gt;
                                    </code>
                                </pre>
                            </div>
                            <div class="col-xl-6 col-lg-6 col-md-6">
                                <form class="form">
                                    <div classs="form-body">
                                        <p class="text-primary text-bold-600">最基本的计数器</p>
                                        <fieldset class="form-group">
                                            <input type="text" class="form-control" maxlength="20" />
                                        </fieldset>
                                    </div>
                                </form>
                                <pre>
                                    <code class="language-html">
                                        &lt;fieldset class="form-group"&gt;
                                            &lt;input type="text" class="form-control" maxlength="20" /&gt;
                                        &lt;/fieldset&gt;
                                    </code>
                                </pre>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-xl-6 col-lg-6 col-md-6">
                                <form class="form">
                                    <div classs="form-body">
                                        <p class="text-primary text-bold-600">始终显示计数器</p>
                                        <fieldset class="form-group">
                                            <input type="text" class="form-control" maxlength="20" max-alwaysShow="true" />
                                        </fieldset>
                                    </div>
                                </form>
                                <pre>
                                    <code class="language-html">
                                        &lt;fieldset class="form-group"&gt;
                                            &lt;input type="text" class="form-control" maxlength="20" max-alwaysShow="true" /&gt;
                                        &lt;/fieldset&gt;
                                    </code>
                                </pre>
                            </div>
                            <div class="col-xl-6 col-lg-6 col-md-6">
                                <form class="form">
                                    <div classs="form-body">
                                        <p class="text-primary text-bold-600">提醒框样式</p>
                                        <fieldset class="form-group">
                                            <input type="text" class="form-control" maxlength="20" max-alwaysShow="true" max-warningClass="badge badge-primary" max-limitReachedClass="badge badge-warning" />
                                        </fieldset>
                                    </div>
                                </form>
                                <pre>
                                    <code class="language-html">
                                        &lt;fieldset class="form-group"&gt;
                                            &lt;input type="text" class="form-control" maxlength="20" max-warningClass="badge badge-primary" max-limitReachedClass="badge badge-warning" max-alwaysShow="true" /&gt;
                                        &lt;/fieldset&gt;
                                    </code>
                                </pre>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-xl-6 col-lg-6 col-md-6">
                                <form class="form">
                                    <div classs="form-body">
                                        <p class="text-primary text-bold-600">文本分隔符</p>
                                        <fieldset class="form-group">
                                            <input type="text" class="form-control" maxlength="20" max-alwaysShow="true" max-separator="--"  />
                                        </fieldset>
                                    </div>
                                </form>
                                <pre>
                                    <code class="language-html">
                                        &lt;fieldset class="form-group"&gt;
                                            &lt;input type="text" class="form-control" maxlength="20" max-separator="--" max-alwaysShow="true" /&gt;
                                        &lt;/fieldset&gt;
                                    </code>
                                </pre>
                            </div>
                            <div class="col-xl-6 col-lg-6 col-md-6">
                                <form class="form">
                                    <div classs="form-body">
                                        <p class="text-primary text-bold-600">自定义提醒内容</p>
                                        <fieldset class="form-group">
                                            <input type="text" class="form-control" maxlength="20" max-alwaysShow="true" max-separator=" of " max-preText="You have " max-postText=" chars remaining."  />
                                        </fieldset>
                                    </div>
                                </form>
                                <pre>
                                    <code class="language-html">
                                        &lt;fieldset class="form-group"&gt;
                                            &lt;input type="text" class="form-control" maxlength="20" max-preText="You have " max-postText=" chars remaining." /&gt;
                                        &lt;/fieldset&gt;
                                    </code>
                                </pre>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-xl-6 col-lg-6 col-md-6">
                                <form class="form">
                                    <div classs="form-body">
                                        <p class="text-primary text-bold-600">自定义提醒内容</p>
                                        <fieldset class="form-group">
                                            <input type="text" class="form-control" maxlength="20" max-alwaysShow="true" max-message="Used %charsTyped% of %charsTotal% chars."  />
                                        </fieldset>
                                    </div>
                                </form>
                                <pre>
                                    <code class="language-html">
                                        &lt;fieldset class="form-group"&gt;
                                            &lt;input type="text" class="form-control" maxlength="20" max-message="Used %charsTyped% of %charsTotal% chars." /&gt;
                                        &lt;/fieldset&gt;
                                    </code>
                                </pre>
                            </div>
                            <div class="col-xl-6 col-lg-6 col-md-6">
                                <form class="form">
                                    <div classs="form-body">
                                        <p class="text-primary text-bold-600">UTF-8编码的文本长度计数</p>
                                        <fieldset class="form-group">
                                            <input type="text" class="form-control" maxlength="20" max-alwaysShow="true" max-utf8="true"  />
                                        </fieldset>
                                    </div>
                                </form>
                                <pre>
                                    <code class="language-html">
                                        &lt;fieldset class="form-group"&gt;
                                            &lt;input type="text" class="form-control" maxlength="20" max-utf8="true" /&gt;
                                        &lt;/fieldset&gt;
                                    </code>
                                </pre>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-xl-6 col-lg-6 col-md-6">
                                <form class="form">
                                    <div classs="form-body">
                                        <p class="text-primary text-bold-600">展示位置</p>
                                        <p class="text-muted">支持：<code>['bottom','top','left','right','bottom-right','top-right','top-left','bottom-left','centered-right','bottom-right-inside','top-right-inside','top-left-inside','bottom-left-inside']</code></p>
                                        <fieldset class="form-group">
                                            <input type="text" class="form-control" maxlength="20" max-alwaysShow="true" max-placement="bottom-right-inside"  />
                                        </fieldset>
                                    </div>
                                </form>
                                <pre>
                                    <code class="language-html">
                                        &lt;fieldset class="form-group"&gt;
                                            &lt;input type="text" class="form-control" maxlength="20" max-placement="bottom-right-inside" /&gt;
                                        &lt;/fieldset&gt;
                                    </code>
                                </pre>
                            </div>
                            <div class="col-xl-6 col-lg-6 col-md-6">
                                <form class="form">
                                    <div classs="form-body">
                                        <p class="text-primary text-bold-600">普通Textarea输入框</p>
                                        <fieldset class="form-group">
                                            <textarea class="form-control" maxlength="100" max-alwaysShow="true" rows="3"></textarea>
                                        </fieldset>
                                    </div>
                                </form>
                                <pre>
                                    <code class="language-html">
                                        &lt;fieldset class="form-group"&gt;
                                            &lt;textarea class="form-control" maxlength="100" rows="3"&gt;&lt;/textarea&gt;
                                        &lt;/fieldset&gt;
                                    </code>
                                </pre>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">File 文件上传</h4>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-xl-6 col-lg-6 col-md-12">
                                <form class="form">
                                    <div classs="form-body">
                                        <p class="text-primary text-bold-600">基本文件上传</p>
                                        <fieldset class="form-group">
                                            <div class="custom-file">
                                                <input type="file" class="custom-file-input" id="inputGroupFile01">
                                                <label class="custom-file-label" for="inputGroupFile01">选择文件</label>
                                            </div>
                                        </fieldset>
                                    </div>
                                </form>
                            </div>
                            <div class="col-xl-6 col-lg-6 col-md-12">
                                <pre>
                                    <code class="language-html">
                                        &lt;fieldset class="form-group"&gt;
                                            &lt;div class="custom-file"&gt;
                                                &lt;input type="file" class="custom-file-input" id="inputGroupFile01"&gt;
                                                &lt;label class="custom-file-label" for="inputGroupFile01"&gt;选择文件&lt;/label&gt;
                                            &lt;/div&gt;
                                        &lt;/fieldset&gt;
                                    </code>
                                </pre>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

<script type="text/javascript">
    lucky.require('form',lucky.factory('form'));
</script>